<template>
  <div class="container">
    <div class="from">
      <el-form ref="ruleFormRef" :rules="rules" label-position="right" label-width="100px" :model="fromData" style="max-width: 460px">
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="fromData.password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="rePassword">
          <el-input type="password" v-model="fromData.rePassword" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="fromData.phone" />
        </el-form-item>
      </el-form>
      <div class="submit">
        <el-button type="primary" @click="onSubmit(ruleFormRef)">修改密码</el-button>
        <el-button type="success" @click="reset(ruleFormRef)">重置</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { userinfo } from '@/store/index.js'
import { changePassword } from '@/api/index.js'
const userinfoStore = userinfo()
const fromData = reactive({
  username: userinfoStore.profile.username,
  password: '',
  rePassword: '',
  phone: ''
})
const ruleFormRef = reactive()
const uPattern = /^[a-zA-Z0-9_-]{4,16}$/
const validatePassWord = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('密码不能为空！'))
  } else if (!uPattern.test(value)) {
    return callback(new Error('必须为4到16位(字母,数字,下划线,减号!)'))
  } else {
    callback()
  }
}
const validateRePassword = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('密码不能为空！'))
  } else if (value !== fromData.password) {
    return callback(new Error('密码不一致！'))
  } else {
    callback()
  }
}
const vaidatePhone = (rule, value, callback) => {
  const phonePattern = /^1[3|4|5|7|8][0-9]{9}$/
  if (!value) {
    return callback(new Error('手机号不能为空！'))
  } else if (!phonePattern.test(value)) {
    return callback(new Error('手机号格式不正确!'))
  } else {
    callback()
  }
}
const rules = reactive({
  password: [{ required: true, validator: validatePassWord, trigger: 'blur' }],
  rePassword: [{ required: true, validator: validateRePassword, trigger: 'blur' }],
  phone: [{ required: true, validator: vaidatePhone, trigger: 'blur' }]
})
const { proxy } = getCurrentInstance()
const onSubmit = ruleFormRef => {
  if (!ruleFormRef) return
  ruleFormRef.validate(valid => {
    if (valid) {
      // 修改密码接口方法体
      changePassword(fromData).then(res => {
        if (res.data) {
          proxy.$Message({
            type: 'success',
            message: res.msg
          })
        } else {
          proxy.$Message.error(res.msg)
        }
      })
    } else {
      return false
    }
  })
}
const reset = ruleFormRef => {
  ruleFormRef.resetFields()
}
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/img/password_bg.jpg');
  .from {
    width: 25%;
  }
  .submit {
    display: flex;
    justify-content: center;
    padding-left: 25px;
  }
  /deep/.el-form-item__label {
    color: white;
  }
  /deep/.el-input__wrapper {
    background-color: rgba(0, 0, 0, 0.292) !important;
    box-shadow: transparent;
  }

  /deep/.el-input__inner {
    color: white;
  }
}
</style>